<template>
    <a-modal
    :title='modalProps.title'
    :visible="visible"
    @ok="handleOk"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    >
      <a-form  :form='form'>
        <a-form-item label='上级部门' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" >
            <a-select   v-decorator="['parentCode',baseInit.parentCode]">
              <a-select-option  v-for='(item,index)  in  departData'  :key='index'  :value="item.code">{{item.name}}</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item label='名称' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" >
            <a-input   v-decorator="['name' , baseInit.name   ]"  />
        </a-form-item>
        <a-form-item label='电话' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" >
            <a-input    v-decorator="['phone' , baseInit.phone ]"/>
        </a-form-item>
        <a-form-item label='地址' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" >
            <a-input    v-decorator="['address' , baseInit.address]"/>
        </a-form-item>
        <a-form-item  style='display: none;' >
            <a-input    v-decorator="['code' , baseInit.code]"/>
        </a-form-item>
      </a-form>
    </a-modal>
</template>

<script>
  import  {  submitAddDepart  }  from  '@/api/system/index'
export default {
  name: 'addDepartment',
  props:{
      visible:{
        type:Boolean,
        default:false
      },
      /*部门选择 option*/ 
      departData:{
        type:Array,
        default:[]
      },
  },
  data () {
    return {
      modalProps:{
          title:'',
          isEdit:false, /*表单进入状态*/
      },
      confirmLoading: false, 
      /*form 初始值*/
      baseInit:{
        code:{initialValue:''},/*隐藏input里加上code*/
        parentCode:{ initialValue :''},
        name:{ initialValue :'' , rules : [{ required : true , message : '请输入部门名称' }]},
        phone:{ initialValue :''},
        address:{ initialValue :''},
      },                                                                               
    }
  },
  methods:{
     handleCancel(e) {
      this.$emit('handleCancel') 
    },
    //提交客户约谈添加信息
    handleOk(e) {
      let that = this
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);

            this.confirmLoading = true;
            let url 
            if(that.modalProps.isEdit == false){
                url ='/op/office/create_office' //新增 部门
            }
            else{
              url = '/op/office/modify_office' //修改 部门
            }
            submitAddDepart(url,values).then((res)=>{
              that.confirmLoading = false;
              that.$message.info(res.data.msg)
              that.$emit('handleOk')
            })
            .catch((err)=>{
              that.confirmLoading = false;
            })
          }
          else{
            console.log(err)
          }
        });
    },
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  mounted(){
    this.$nextTick(()=>{
      this.$on('openDialog',function(code){
        this.modalProps.isEdit = false
        this.modalProps.title = '添加部门'
        /*清空表单输入和校验*/
        this.form.resetFields()
        /*设置默认值*/
        this.baseInit.code.initialValue = ''
        this.baseInit.parentCode.initialValue = code
        this.baseInit.name.initialValue = ''
        this.baseInit.phone.initialValue = ''
        this.baseInit.address.initialValue = ''
      })
      this.$on('editDialog',function(data){
        this.modalProps.isEdit = true
        this.modalProps.title = '编辑部门'
        /*清空表单输入和校验*/
        this.form.resetFields()
        /*设置默认值*/
        this.baseInit.code.initialValue = data.code
        this.baseInit.parentCode.initialValue = data.parentCode
        this.baseInit.name.initialValue = data.name
        this.baseInit.phone.initialValue = data.phone
        this.baseInit.address.initialValue = data.address
        
      })
    })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
